<template>
  <div>
    <div><!-- 歌曲信息 -->

      <page2musicList
        :Id="this.TbMusic.musicId"
        :UserId="this.TbMusic.musicUploaderId"
        :MusicId="this.TbMusic.musicId"
        :MusicName="this.TbMusic.musicName"
        :MusicAuthor="this.TbMusic.musicAuthor"
        :MusicIcon="this.TbMusic.musicIcon"
        :MusicUrl="this.TbMusic.musicUrl"
        :MusicDescription="this.TbMusic.musicDescription"
        >
        </page2musicList>

    </div>

    <div><!-- 用户信息 -->
      <van-cell-group inset>
      <van-cell >
        <van-row>
        <van-col span="6">
          <van-image
          round
          width="3rem"
          height="3rem"
          :src="this.UserDTO.userIcon"
          />   
        </van-col>
        <van-col span="14">
          <p class="user1"> {{this.UserDTO.userName}} </p>
        </van-col>
        <van-col span="4">
          <!-- <van-button v-if="!this.ItisFollow" type="info" size="small"  round @click="followIt()">关注</van-button>
          <van-button v-if="this.ItisFollow"  type="info" size="small"  round @click="followIt()">取消关注</van-button>  -->
          <van-icon size="1.8rem" v-if="this.ItisFollow" @click="followIt()" name="http://rul4y8e5f.hn-bkt.clouddn.com/x_%E5%85%B3%E6%B3%A82%20%281%29.png"></van-icon>
          <van-icon size="1.8rem" v-if="!this.ItisFollow" @click="followIt()" name="http://rul4y8e5f.hn-bkt.clouddn.com/x_%E5%85%B3%E6%B3%A82.png"></van-icon>

        </van-col>
      </van-row>
      </van-cell>
    </van-cell-group>
    <!-- <UserPage2List :ItuserId="this.UserDTO.userId" :ItuserName="this.UserDTO.userName" :ItuserIcon="this.UserDTO.userIcon"></UserPage2List> -->
    </div>
    <div>
      <!-- 博客详情 -->
      <div>

        <van-row>
          <van-col span="4"></van-col>
          <van-col span="16">
               <!-- 图片轮播 -->
              <van-swipe :autoplay="3000">
                <!-- <van-swipe-item v-for="(image, index) in this.imgList" :key="index"> -->
                  <van-swipe-item v-for="(image, index) in this.imgList" :key="index">
                  <!-- <img v-lazy="image"  /> -->
                  <van-image
                    height="200"
                    fit="fill"
                    radius ="10px"
                    :src="image"
                  />
                </van-swipe-item>
              </van-swipe>

          </van-col>
          <van-col span="4"></van-col>
        </van-row>
     
      </div>

      <van-cell   >
        <div>
          <van-row>
            <van-col span="8">
              <label class="gushi">音乐故事：</label>
            </van-col>
            <van-col span="8"></van-col>
            <van-col span="8">
              <div style="display: flex;justify-content: center;">
             
              <van-image width="30" height="30" src="http://rul4y8e5f.hn-bkt.clouddn.com/查看.png"> </van-image>
                 <label class="viewPage"> {{this.TbBlog.pageView}}</label>
              </div>
            </van-col>
          </van-row>
        </div>
        <p>
          {{this.TbBlog.blogText}}
            </p>
    
      </van-cell>



    </div>
    <BlogCommentList :ItBlogId="this.ItBlogId"></BlogCommentList>
  </div>
</template>

<script>
import UserAPI from '@/api/UserAPI'
import MusicAPI from '@/api/MusicAPI'
import page2musicList from '../Music/home/page2musicList.vue'
import FollowAPI from '@/api/FollowAPI'
import BlogAPI from '@/api/BlogAPI'

import Vue from 'vue';
import { Lazyload } from 'vant';
import UserPage2List from '../User/UserInfo/UserPage2List.vue'
import BlogCommentList from './BlogCommentList.vue'

Vue.use(Lazyload);

export default {
  components: { page2musicList, UserPage2List, BlogCommentList },
  name: "BlogAllInfo",
  data() {
    return {
      UserDTO:{
        userId:"",
        userName: "",
        userIcon: "",
      },
      TbBlog:{
        blogId:"",
        blogText:"",
        blogAuthor:"",
        musicId:"",
        musicName:"",
        pageView:"6",
      },
      TbMusic: {
                musicId: "",
                musicName: "",
                musicAuthor: "",
                musicUploaderId: "",
                musicUrl: "",
                musicDescription: "",
                musicIcon: "",
                songWord: "",
                musicLike: "",
                countComment: "",
                countCollect: "",
                isLike:false,
            },
      ItBlogId:"",
      ItuserId:"",
      ItmusicId:"",
      // 是否关注，默认为否
      ItisFollow: false,
      imgList: [],
      images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
      ],

    }
  },

  created() {
    // 获取当前blog信息
    var Id1 = localStorage.getItem("blogId",this.ItBlogId)
     if(this.$route.params.blogId == null){
      this.ItBlogId=Id1
     }else{
      this.ItBlogId=this.$route.params.blogId
      localStorage.setItem("blogId",this.ItBlogId)
     }
     this.getBlogAllInfo()

  },

  mounted() {
 
  },

  methods: {

    // 获取当前blog信息
    getBlogAllInfo(){
      var result = BlogAPI.GetAllInfoById(this.ItBlogId)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.TbBlog=val.data
          console.log(this.TbBlog)
          // console.log(this.musicUploadDTO.musicIcon);
          this.getItImgUrlList()
          this.getUserInfo()
          this.getMusicInfo()
          this.ornotfollowIt()

        }else{
          this.$toast(val.errorMsg)     
        }
            })

   
    },

    // 获取blog图片的信息
    getItImgUrlList(){
      var result = BlogAPI.GetBlogImgList(this.ItBlogId)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.imgList=val.data
          console.log(this.imgList)
          // console.log(this.musicUploadDTO.musicIcon);
        }else{
          this.$toast(val.errorMsg)
      
        }
            })
    },

          // 获取当前用户UserDTO
    getUserInfo(){
      // var result = UserAPI.Info(18)
      var result = UserAPI.Info(this.TbBlog.blogAuthor)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.UserDTO=val.data
          // console.log(this.musicUploadDTO.musicIcon);
        }else{
          this.$toast(val.errorMsg)
      
        }
            })
    },
    getMusicInfo(){
      var result = MusicAPI.GetAllInfo(this.TbBlog.musicId)
      // var result = MusicAPI.GetAllInfo(3)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.TbMusic=val.data
          // console.log(this.musicUploadDTO.musicIcon);
        }else{
          this.$toast(val.errorMsg)
        }
            })
    },

    // 查看是否关注了该用户

    // 关注、取消用户
    followIt(){
      var result = FollowAPI.Follow(this.TbBlog.blogAuthor,this.ItisFollow)
      // var result = FollowAPI.Follow(18,this.ItisFollow)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.$toast(val.data)
          // this.$router.go(0)
          this.ornotfollowIt()
          // console.log(this.musicUploadDTO.musicIcon);
        }else{
          this.$toast(val.errorMsg)
        }
            })
    },

    // 是否关注
    ornotfollowIt(){
      var result = FollowAPI.IsFollow(this.TbBlog.blogAuthor)
      // var result = FollowAPI.IsFollow(18)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.ItisFollow = val.data
          // this.$toast(this.ItisFollow)
           console.log(this.ItisFollow)
          // console.log(this.musicUploadDTO.musicIcon);
        }else{
          this.$toast(val.errorMsg)
        }
            })
    }

  },

  props:{
    ItBlogId: {
      required: true,
      type: String
    },
  }
}
</script>

<style scoped>
.user1{
  color: #0cb4e7;
}

.viewPage{
  color: #1b1919;
}


</style>